import React, { Component } from 'react'
import { BackHandler, Alert, ScrollView, KeyboardAvoidingView, View, Text } from 'react-native'
import Button from '../Components/Button'
import TextInput from '../Components/TextInput'
import { connect } from 'react-redux'

import AddressActions from '../Redux/AddressRedux'

// Styles
import styles from './Styles/AddressEditScreenStyle'

class AddressEditScreen extends Component {
  static navigationOptions = {
    title: '地址详情'
  }
  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }
  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }
  onBackPress = () => {
    this.props.navigation.goBack()
    return true
  }
  constructor(props) {
    super(props)
    const { state } = this.props.navigation

    var index,id,name,mobile,region,street
    if(state.params) {
      index = state.params.index
      const address = this.props.address.payload[index]
      id = address.id
      name = address.name
      mobile = address.mobile
      region = address.area
      street = address.address
    }
    this.state = {
      index: index,
      id: id,
      name: name,
      mobile: mobile,
      region: region,
      street: street
    }
  }
  componentDidUpdate(prevProps, prevState) {
    if(prevProps.address.fetching && !this.props.address.error) {
      this.props.navigation.goBack()
    }
  }
  _delete = (index, id) => {
    this.props.delete(this.props.token, this.state.index, this.state.id)
  }
  _submit= () => {
    if(!this.check()) {
      return
    }
    let data = {
      name: this.state.name,
      mobile: this.state.mobile,
      area: this.state.region,
      address: this.state.street
    }
    if (this.state.index === undefined) { // for create
      this.props.create(this.props.token, data)
    } else { // for update, insert id first
      data.id = this.state.id
      this.props.update(this.props.token, this.state.index, data)
    }
  }
  check() {
    if (!this.state.name) {
      Alert.alert('请输入联系人姓名')
      return false
    }
    if (!this.state.mobile || this.state.mobile.length !== 11) {
      Alert.alert('请输入正确的手机号码')
      return false
    }
    if (!this.state.region) {
      Alert.alert('请输入所在区域')
      return false
    }
    if (!this.state.street) {
      Alert.alert('请输入详细地址')
      return false
    }
    return true
  }
  render () {
    const { goBack } = this.props.navigation
    return (
      <ScrollView style={styles.container}>
        <KeyboardAvoidingView behavior='position'>
          <Text>姓名</Text>
          <TextInput
            onChangeText={(name)=>this.setState({name:name})}
            returnKeyType='next'
            value={this.state.name}
            placeholder='请输入联系人姓名' />
          <Text>手机号码</Text>
          <TextInput
            onChangeText={(mobile)=>this.setState({mobile:mobile})}
            returnKeyType='next'
            value={this.state.mobile}
            placeholder='请输入联系电话'
            keyboardType='phone-pad' />
          <Text>省市区</Text>
          <TextInput
            onChangeText={(region)=>this.setState({region:region})}
            returnKeyType='next'
            value={this.state.region}
            placeholder='请输入所在区域' />
          <Text>详细地址</Text>
          <TextInput
            onChangeText={(street)=>this.setState({street:street})}
            returnKeyType='send'
            value={this.state.street}
            placeholder='请输入详细地址' />
          {this.props.address.fetching ? (
            <Button margin title='保存中...' disabled />
          ) : (
            <Button margin title='保存' onPress={this._submit} />
          )}
          {this.state.index !== undefined &&
              <Button danger title='删除' onPress={this._delete} />
          }
        </KeyboardAvoidingView>
      </ScrollView>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    token: state.user.payload.token,
    address: state.address,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    create: (token,data)=>dispatch(AddressActions.createRequest(token,data)),
    update: (token,index,data)=>dispatch(AddressActions.updateRequest(token,index,data)),
    delete: (token,index,id)=>dispatch(AddressActions.deleteRequest(token,index,id))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(AddressEditScreen)
